<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style>
        /* 给网页装饰 CSS(层叠样式表) */
        /* 选择 */
        body {
            /* 标签选择器 默认样式 */
            margin: 0;
            /* 外边距 */
            background: url("../image/bac.webp")no-repeat;
            background-position: center;
        }

        .footer {
            /* class(类)选择器 */
            width: 760px;
            /* 宽度:300(px 单位 像素); */
            height: 240px;
            /* 高度:200px; */
            margin: 300px auto;
            /* 上下 左右(自动相等) */
            /* background-color: #ff9999; */
            /* 背景颜色:颜色值; */
        }

        .west {
            float: left;
            /* 浮动(横排) left(从左至右) */
            width: 25%;
            /* 百分比是基于父元素计算的 */
            height: 100%;
            background-repeat: no-repeat;
            /* 背景重复 不重复 */
            background-position-y: center;
            /* 背景位置 y方向 居中 */
        }

        .west1 {
            /* 背景图片 图片路径/地址url */
            background-image: url("../image/west_01.png");
            /* 播放/绑定动画 名称 时间 脚步(8) 循环 */
            animation: swk 1.4s steps(8) infinite;
        }

        .west2 {
            /* 背景图片 图片路径/地址url */
            background-image: url("../image/west_02.png");
            animation: zbj 1.4s steps(8) infinite;
        }

        .west3 {
            /* 背景图片 图片路径/地址url */
            background-image: url("../image/west_03.png");
            animation: ts 1.4s steps(8) infinite;
        }

        .west4 {
            /* 背景图片 图片路径/地址url */
            background-image: url("../image/west_04.png");
            animation: ss 1.4s steps(8) infinite;
        }

        @keyframes swk {

            /* 关键帧(画面) 动画名称 */
            0% {
                /* 动画开始的画面 */
                background-position-x: 0px;
                /* 背景位置x方向  */
            }

            100% {
                /* 结束 */
                background-position-x: -1600px;
            }
        }

        @keyframes zbj {

            /* 关键帧(画面) 动画名称 */
            0% {
                /* 动画开始的画面 */
                background-position-x: 0px;
                /* 背景位置x方向  */
            }

            100% {
                /* 结束 */
                background-position-x: -1600px;
            }
        }

        @keyframes ts {

            /* 关键帧(画面) 动画名称 */
            0% {
                /* 动画开始的画面 */
                background-position-x: 0px;
                /* 背景位置x方向  */
            }

            100% {
                /* 结束 */
                background-position-x: -1360px;
            }
        }

        @keyframes ss {

            /* 关键帧(画面) 动画名称 */
            0% {
                /* 动画开始的画面 */
                background-position-x: 0px;
                /* 背景位置x方向  */
            }

            100% {
                /* 结束 */
                background-position-x: -1680px;
            }
        }

        /*
                CSS3动画 -> 关键的画面 开始0px 结束-1600px
                传统动画 -> 动画片 动态效果 -> 实际由很多张静止连续的画面拼凑起来的   
            */
    </style>
</head>

<body>
    <!-- 身体/主体标签 存放给用户看的内容  -->
    <!-- 盒子标签 矩形区域 长方形 大小(宽高) 标签区分 class(类名)命名 规范化 英文单词 见名知意  -->
    <div class="footer">
        <div class="west west1"></div>
        <div class="west west2"></div>
        <div class="west west3"></div>
        <div class="west west4"></div>
    </div>
</body>

</html>